<template>
  <view class="dayTable">
    <scroll-view class="calendar_body" :style="scrollHeight" :scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
			
      <!-- 默认底色表格 -->
      <view class="calendar_table">
        <view v-for="(item,index) in defaultList" :key="index" :ref='index' class="cal_tr" :class="item.trClass" :style="{'height':unitHeight+'px;'+item.hidClass}">
          <view class="left_time">{{item.timeTitle}}</view>
          <view class="right_content"></view>
        </view>
      </view>

      <!-- 时间表区域 -->
      <view class="calendar_meeting">
        {{meetingList.length}}
        <view v-for="(item,index) in meetingList" :key="index" :style="item.style" class="meeting_a" :class="item.bgClass"
          @click="showDetail(item,index,$event)">
          <view class="create_content_box">
            <view class="meeting_content_time">{{item.time}}</view>
            <view class="meeting_content_name">客户: {{item.userName}}</view>
          </view>
        </view>
      </view>
			
			
    </scroll-view>
  </view>
</template>

<script>
  export default {
    props: {
      chooseDate: String,
			meetingList: Array,
      // uMinute: Number, //表格单元时长
      // showMin: Number, //显示单元时长
      defaultChooseLong: Number, //默认点击所占时长
      scrollHeight: String,
			
			unitHeight: Number,
			unitMinute: Number,
			showMinute: Number,
			defaultChoose: Number,
			scale: Number,
			minRatio: Number,
			minAll: Number,
			defaultList: Array,
			nowLine: String,
			startId: Number,
			isCreate: Boolean,
			createMeet: String,
			// isScroll: Boolean,
			nowTime: Object,
			scrollTop: Number,
			timeId: Number,
			isToday: Number,
			meetingDetail: String
    },
    data() {
      return {
      };
    },
    created() {},
    methods: {
      scroll(e) {
				this.$emit('scroll', e);
      },
      // 判断是否为今天
      isTodayFun(d) {
				this.$emit('isTodayFun', d);
      },
      //获取表格默认数据
      getDefaultTable() {
        this.$emit('getDefaultTable');
      },
      //整理时间表列表数据
      getMeetingList() {
        this.$emit('getMeetingList');
      },
      //点击时间表列表
      showDetail(item,index) {
				this.$emit('showDetail', item, index);
      },
      //创建时间表渲染
      createMeeting() {
				this.$emit('createMeeting');
      },
    }
  }
</script>

<style lang="less">
  @timeSize: 15px;
  @borderColor: #ddd;

  .create_content_box {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .dayTable {
    border-top: 1px solid @borderColor;
    width: 100%;
    background-color: #ffffff;
  }

  .calendar_body::-webkit-scrollbar {
    display: none;
  }

  .calendar_body {
    height: 100vh;
    width: calc(100vw - 8px);
    position: relative;
    overflow-x: hidden;

    .calendar_table {
      margin-top: 15px;
      position: absolute;
      top: 0;
      // z-index: 10;

      .cal_tr {
        width: 100%;
        height: 16px;
        display: flex;
        font-size: 0;
        color: #808080;
      }

      .left_time {
        line-height: 0;
        width: 50px;
        text-align: center;
      }

      .right_content {
        border-top: 1px solid #ffffff;
        height: 15px;
        width: calc(100vw - 50px);
      }

      .hasTime {
        font-size: @timeSize;
      }

      .hasTime .right_content {
        border-color: @borderColor;
      }
    }

    .calendar_meeting {
      margin-top: 15px;
      position: absolute;
      top: 0;
      // height: 100%;
      width: 100%;

      .redBg {
				border-left: 2px solid #F65B67;
        background-color: rgba(254, 222, 224, 1);
        color: #F65B67;
        // border-left: 4px solid #F65B67;
      }

      .blurBg {
        // border-left: 4px solid #34BDA0;
        color: #34BDA0;
        background-color: rgba(222, 248, 234, 1);
      }

      .meeting_a {
        font-size: @timeSize;
        left: 50px;
        right: 0px;
        position: absolute;
        cursor: pointer;
        border-radius: 4px;
      }

      .meeting_detail {
        width: calc(100% - 52px);
        left: 50px;
        // width: 99%;
        font-size: @timeSize;
        position: absolute;
        background-color: #ffffff;
        height: 100px;
        border-radius: 4px;
        box-shadow: 0 0 5px #999999;
        z-index: 999;
        box-sizing: border-box;
        padding: 10px;
      }

      .meeting_detail_top {
        // top: -114px;
      }

      .meeting_detail_bottom {
        // bottom: -114px;
      }

      .meeting_detail_top ::before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: -7px;
        left: calc(50% - 6px);
        border-style: solid;
        border-width: 8px;
        border-color: #ffffff #ffffff transparent transparent;
        transform: rotate(135deg);
        box-shadow: 2px -2px 3px -1px #cccccf;

      }

      // 向上的气泡
      .meeting_detail_bottom:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: -7px;
        left: calc(50% - 6px);
        border-style: solid;
        border-width: 8px;
        border-color: transparent transparent #fff #fff;
        transform: rotate(135deg);
        box-shadow: -2px 2px 3px 0 rgba(0, 0, 0, 0.2);
      }

      .meeting_content_time {
        margin-left: 5px;
        min-width: 135px;
      }

      .meeting_content_name {
        // line-height: 100%;
        margin-left: 5px;
        width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .isFlex {
        align-items: center;
        display: flex;

        .meeting_content_name {
          width: 135px;
        }
      }

      .meeting_create {
        left: 50px;
        right: 0px;
        height: 63px;
        position: absolute;
        border-radius: 3px;
        background-color: #3788c8;
        z-index: 990;
        font-size: @timeSize;

        .meeting_content {
          color: #ffffff;
          margin-left: 5px;
          // line-height: 100%;
        }

        .radius {
          width: 80px;
          height: 80px;
          position: absolute;
          z-index: 999;
          cursor: pointer;

          display: flex;
          justify-content: center;
          align-items: center;

          view {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 1rpx solid #3788c8;
            background-color: #ffffff;
          }
        }

        .radius_first {
          top: -40px;
          left: 0;
        }

        .radius_second {
          bottom: -40px;
          right: 0;
        }

        .meeting_left_time {
          position: absolute;
          left: -50px;
        }

        .left_Time_show {
          background-color: #ffffff;
          width: 50px;
          position: absolute;
          font-size: @timeSize;
          text-align: center;
          color: #1994FD;
          line-height: 0;
        }

        .endTimeText {
          bottom: 0;
        }
      }
    }

    .time_now {
      margin-top: 15px;
      display: flex;
      align-items: center;
      width: 100vw;
      height: 0.5px;
      position: absolute;
      z-index: 50;

      .left_text_red {
        text-align: center;
        width: 50px;
        color: #FF0000;
        font-size: @timeSize;
        line-height: 0;
      }

      .left_text_radio {
        width: 4px;
        height: 4px;
        background-color: #FF0000;
        border: 1rpx solid #ffffff;
        border-radius: 50%;
        line-height: 0;
        margin-left: -3px;
      }

      .time_line {
        flex-grow: 1;
        border: 0.5px solid red;
      }
    }
  }
</style>
